import React, { useReducer } from "react";

const countData = (state, action) => {
  switch (action.type) {
    case "ADD":
      return state + 1;
    case "SUB":
      return state - 1;
    default:
      return state;
  }
};

function App() {
  /**
   * 参数：
   *      reducer ： 整合函数
   *          对于我们当前state的所有操作都应该在该函数总定义
   *          该函数的返回值，会成为state的新值
   *          reducer在执行时，会收到两个参数：
   *          state 当前最新的state
   *          action 他需要一个对象
   *      返回值：
   *          数组：
   *          第一个参数，state 用来获取state的值
   *          第二个参数，state 修改的派发器
   */
  const [count, countDispatch] = useReducer(countData, 11);

  const addHandler = () => {
    countDispatch({ type: "ADD" });
  };

  const subHandler = () => {
    countDispatch({ type: "SUB" });
  };

  return (
    <div>
      <button onClick={subHandler}>减少</button>
      {count}
      <button onClick={addHandler}>增加</button>
    </div>
  );
}

export default App;
